<template>
  <div id="transfer-table-bak" class="userSelect-root">
    <div style="width:40%;margin-bottom: 2px">
      <el-input class="ctlTask-body-head__search" v-model="searchParams.nickName" @keyup.enter.native="searchBtn" placeholder="输入用户姓名进行搜索">
        <el-button slot="append" icon="el-icon-search" @click="searchBtn"></el-button>
      </el-input>
    </div>

    <lark-transfer-table tableSize="mini" :disabled-select-field="disabledSelectField" class="mc-table" height="100%" table-height="410px"
                         :base-table-data="dataList"
                         v-model="selected" :headers="headers" :flag-filed="flagFiled"></lark-transfer-table>
    <el-pagination
      small
      layout="prev, pager, next"
      :total="pageInfo.total"
      :current-page="pageInfo.pageNum"
      :page-size="pageInfo.pageSize"
      @current-change="pageChange"
    >
    </el-pagination>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, ref, watch, computed } from '@vue/composition-api'
import { userList } from '@/api/industry/user'
import loading from '@/utils/loading'

export default {
  name: 'userSelect',
  props: {
    canSelectIsCtl: {
      type: Boolean,
      default: true
    },
    value: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  model: {
    prop: 'value',
    event: 'changed'
  },

  setup(props, content) {
    let data = reactive({
      pageInfo: {
        total: 0,
        pageNum: 1,
        pageSize: 10
      },
      searchParams: {
        nickName: ''
      },
      dataList: [],
      selected: props.value,
      headers: [{ label: '姓名', value: 'nickName', width: '80' }, { label: '状态', value: 'state', width: '80' }],
      flagFiled: 'userId'
    })

    let disabledSelectField = computed({
      get: () => {
        if (!props.canSelectIsCtl) {
          return 'canSelect'
        }
        return null
      }, set: () => {
      }
    })

    watch(() => data.searchParams.nickName, () => {

      loadListData()
    })

    watch(() => props.value, (newVal) => {
      data.selected = newVal
    })
    watch(() => data.selected, (newVal) => {
      content.emit('changed', newVal)
    })

    const pageChange = async(currentPage) => {
      data.pageInfo.pageNum = currentPage
      await loadListData()
    }

    const loadListData = async() => {
      let load = loading(document.getElementById('transfer-table'))
      try {
        let response = await userList({ ...data.searchParams, ...data.pageInfo })
        data.dataList = response.rows.map(user => {
          return {
            userId: user.userName,
            nickName: user.nickName,
            state: user.isClt == '0' ? '未采集' : '采集中',
            isClt: user.isClt,
            canSelect: user.isClt == '0' ? true : false
          }
        })
        data.pageInfo.total = response.total
      } finally {
        load.close()
      }
    }

    const searchBtn = async() => {
      data.pageInfo.pageNum = 1
      await loadListData()
    }

    onMounted(async() => {
      data.pageInfo.pageNum = 1
      await loadListData()
    })

    return { ...toRefs(data), searchBtn, loadListData, pageChange, disabledSelectField }
  }
}
</script>

<style lang="scss">
.userSelect-root {
  padding: 10px 5px;
}
</style>
